<template>
  <div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <div class="head">
          <a @click="$router.push({path: '/Assets'})" class="return"></a>
        </div>
        <div class="user-hd">
          <div class="weui-cells" v-if="personal">
            <div class="weui-cell" style="padding-left: 20px;">
              <div class="weui-cell__hd tx">
                <!-- <input type="file" id="id" name="image" class="getImgUrl_file" @change="shangc($event)" accept="image/jpg,image/jpeg,image/png"> -->
                <img
                  src=""
                  alt="">
              </div>
              <div class="weui-cell__bd">
                <div class="f18">
                  <span v-text="personal.userName"></span>
                  <van-tag round type="success" v-if="personal.levelName">{{ personal.levelName }}</van-tag>
                </div>
                <div class="f14">
									<span v-text="$t('My.v1') + '：' + personal.uuid">

									</span>
                </div>
              </div>
              <div class="weui-cell__ft">

              </div>
              <span
                style="font-size: 12px;position: absolute;right: 0;background: #07c160;padding-left: 10px;padding-top: 2px;padding-bottom: 2px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;"
                v-if="personal.nodeName" v-text="personal.nodeName">普通节点</span>
            </div>
          </div>
        </div>
        <group class="ml" label-width="9.5em" label-margin-right="2em">
          <cell :title="$t('My.v1')" @click.native="$router.push({path: '/Invite'})">
            <img slot="icon" width="30" src="../assets/images/My-3.png">
          </cell>
          <cell :title="$t('My.v2')" @click.native="$router.push({path:'/Safety'})">
            <img slot="icon" width="30" src="../assets/images/My-4.png">
          </cell>
          <cell :title="$t('My.v6')" @click.native="$router.push({path: '/Lang'})">
            <img slot="icon" width="30" src="../assets/images/My-10.png">
          </cell>
          <cell :title="$t('My.v3')" @click.native="$router.push({path: '/ToChange'})">
            <img slot="icon" width="30" src="../assets/images/My-6.png">
          </cell>
          <cell :title="$t('My.v4')" @click.native="OutChange()">
            <img slot="icon" width="30" src="../assets/images/My-7.png">
          </cell>
          <cell :title="$t('My.v5')" @click.native="$router.push({path: '/MyTeam'})">
            <img slot="icon" width="30" src="../assets/images/My-8.png">
          </cell>
          <cell :title="$t('My.v11')" @click.native="$router.push({path: '/MyReward'})">
            <img slot="icon" width="30" src="../assets/images/My-9.png">
          </cell>
          <cell :title="$t('My.v12')" @click.native="inv" v-show="show">
            <img slot="icon" width="30" src="../assets/images/bbh.png">
            <span v-text="localVer">0.0.1</span>
          </cell>
        </group>
        <div class="btn">
          <van-button slot="button" size="normal" :loading="loading" type="info" @click.native="loginOut">
            {{$t('My.v7')}}
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {Toast, Dialog} from 'vant';
    import {mine, base, safety} from './../utils/api';

    let _this;
    export default {
        data() {
            return {
                personal: [],
                accounts: [],
                users: '',
                localVer: '0.0.1', //版本号
                show: false,
                loading: false
            }
        },
        beforeCreate() {
            _this = this;
        },
        created() {

        },
        mounted() {
            // this.imgs();
            this.getUser();
            _this.$nextTick(() => {
                setTimeout(() => {
                    if (window.plus) {
                        // 获取本地应用资源版本号
                        plus.runtime.getProperty(plus.runtime.appid, function (inf) {
                            _this.localVer = inf.version;
                            _this.show = true;
                        });
                    } else {
                        _this.show = false;
                    }
                }, 100);
            });
        },
        methods: {
            getUser() { // 个人信息
                this.getPer();
            },
            getPer() {
                mine.getPersonal().then(res => {
                    _this.personal = res.data;
                })
            },
            loginOut() { // 退出
                Dialog.confirm({
                    message: _this.$t('My.v8') + '？',
                    confirmButtonText: _this.$t('My.v9'),
                    cancelButtonText: _this.$t('My.v10'),
                    cancelButtonColor: 'white'
                }).then(() => {
                    base.getSignOut().then(res => {
                        sessionStorage.clear();
                        localStorage.clear();
                        _this.axios.defaults.headers['Authorization'] = '';
                        Toast({
                            duration: 1000,
                            message: res.msg
                        });
                        _this.$router.push({
                            path: '/Login'
                        });
                    })
                }).catch(() => {

                });
            },
            OutChange() {
                if (sessionStorage.Account) {
                    this.axios.get(process.env.API_HOST + 'user/getIsTradePass').then(res => { // 判断是还是设置交易密码
                        if (res.data.data == 1) {  // 当true为已设置交易密码
                            this.$router.push({
                                path: '/OutChange'
                            });
                        } else {
                            let _this = this
                            Dialog.confirm({
                                message: _this.$t('My.v13') + '！',
                                confirmButtonText: _this.$t('My.v14'),
                                cancelButtonText: _this.$t('My.v15'),
                                cancelButtonColor: 'white'
                            }).then(() => {
                                _this.$router.push({
                                    path: '/UpdatePayPwd',
                                    query: {
                                        type: 0,
                                        roid: 'My'
                                    }
                                })
                            }).catch(() => {  //稍后设置

                            });
                        }
                    })
                }
            },
            inv() {
                if (window.plus) {
                    plus.runtime.getProperty(plus.runtime.appid, function (inf) {
                        Dialog.alert({
                            title: _this.$t('My.v16'),
                            message: inf.version,
                            confirmButtonText: 'OK'
                        }).then(() => {
                            // on close
                        });
                    });
                }
            },
            imgs() {
                //这是网上的一张图片链接
                var url = "http://p1.pstatp.com/large/435d000085555bd8de10";
                this.getBase(url)
                    .then(function (base64) {
                        console.log(base64);//处理成功打印在控制台
                    }, function (err) {
                        console.log(err);//打印异常信息
                    });
            },

            //传入图片路径，返回base64
            getBase(img) {
                function getBase64Image(img, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
                    var canvas = document.createElement("canvas");
                    canvas.width = width ? width : img.width;
                    canvas.height = height ? height : img.height;

                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    var dataURL = canvas.toDataURL();
                    return dataURL;
                }

                var image = new Image();
                image.crossOrigin = '';
                image.src = img;
                var deferred = $.Deferred();
                if (img) {
                    image.onload = function () {
                        deferred.resolve(getBase64Image(image));//将base64传给done上传处理
                    }
                    return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
                }
            }
        }
    }
</script>

<style lang="less" scoped>
  .head ~ .overlay {
    top: 0 !important;
  }

  .head {
    background: transparent;
    position: absolute;
  }

  .f18 {
    font-size: 18px;
    font-weight: bold;
  }

  .f14 {
    font-size: 12px;
  }

  .f13 {
    font-size: 13px;
  }

  .weui-cells {
    background: none !important;
  }

  .user-hd {
    background: url(../assets/images/My-1.png) 100% 100%;
    background-size: cover;
    color: #fff;
    position: relative;
    min-height: 170px;
    padding-top: 10px;

    .yz {
      position: absolute;
      right: 0;
      top: 36%;
      background: rgba(52, 75, 125, .9);
      padding: 0 6px;
      border-radius: 12px 0 0 12px;
      font-size: 14px;

      img {
        width: 18px;
        height: 18px;
        vertical-align: top;
        position: relative;
        top: 2px;
        padding-right: 4px;
      }
    }

    .info {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 24px;
      height: 24px;
      background: url(../assets/images/g6.png) no-repeat center;
      background-size: 24px;
      z-index: 999;

      i {
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        display: block;
        position: relative;
        left: 18px;
        top: -3px;
      }
    }

    .tx {
      position: relative;
      margin-right: 15px;

      img {
        width: 66px;
        height: 66px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #fff;
      }

      .level {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: #feb542;
        color: #fff;
        border-radius: 50%;
        border: 1px solid #fff;
        font-size: 12px;
        text-align: center;
      }
    }

    .weui-cells {
      background: none;
      padding: 20px 0 10px;

      .weui-cell__bd {
        padding-right: 50px;
      }
    }

    .fixed {
      position: absolute;
      bottom: -55px;
      padding: 15px 10px;
      width: 100%;
      box-sizing: border-box;
    }

    .weui-flex {
      background: #344b7d;
      color: #a9a9a9;
      padding: 15px 0;

      .val {
        font-size: 20px;
        color: #00dd94;
      }
    }
  }

  .weui-cell:before {
    border-top: 0;
  }

  .weui-fixed-btm .weui-flex__item {
    text-align: center;
    border-right: 1px solid #70798d;
  }

  .weui-fixed-btm .weui-flex__item:last-child {
    border-right: 0;
  }

  .weui-grid {
    text-align: center;

    img {
      width: 30px;
    }

    p {
      font-size: 14px;
      padding-top: 10px;
    }
  }

  .list {
    background: #fff;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;

    .title {
      margin: 0 15px;
      padding: 15px 0;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  /deep/ .weui-cells:after {
    border-bottom: 0;
  }

  /deep/ .weui-grid:after {
    border-bottom: 0;
  }

  /deep/ .weui-grids:before {
    border-top: 0;
  }

  /deep/ .vux-1px-b:after {
    border-bottom: 1px solid #f5f5f5;
  }

  .prompt {
    text-align: center;
    color: #999;
    padding: 30px 0;

    .btn {
      background: #702aac;
      display: inline-block;
      color: #fff;
      padding: 5px 20px;
      border-radius: 20px;
      margin-top: 20px;
    }
  }

  .ml {
    margin: 0 20px;
    position: relative;
    top: -50px;

    /deep/ .weui-cells {
      border-radius: 5px;
    }

    /deep/ .weui-cell {
      background: #24293e !important;
      font-size: 15px !important;
    }

    /deep/ .weui-cell__hd img {
      margin-right: 10px;
    }
  }

  .btn {
    position: relative;
    top: -30px;
    padding: 0px 20px;
  }

  .name {
    font-size: 13px;
  }
</style>
